<template>
  <div v-if="showMain" class="plugin-app-main">
    <div class="demo">
      <button class="close-btn" @click="closeMain" aria-label="关闭">×</button>
      <el-form :model="form" label-width="80px" style="width: 320px;">
        <el-form-item label="复选框">
          <el-checkbox v-model="form.isChecked">已选</el-checkbox>
        </el-form-item>
        <el-form-item label="输入框">
          <el-input v-model="form.inputValue" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="下拉选择">
          <el-select v-model="form.selectValue" placeholder="请选择">
            <el-option v-for="option in selectOptions" :key="option.value" :label="option.text" :value="option.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="多行文本">
          <el-input type="textarea" v-model="form.textareaValue" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="showAllValues">显示所有值</el-button>
          <el-button @click="openSetting">打开设置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'


const props = defineProps<{
  showMain: boolean
}>()

const emit = defineEmits<{
  'update:showMain': [value: boolean]
}>()

const closeMain = () => {
  emit('update:showMain', false)
}

const form = ref({
  isChecked: false,
  inputValue: '',
  selectValue: '',
  textareaValue: '',
})
const selectOptions = [
  { value: '1', text: '选项一' },
  { value: '2', text: '选项二' },
  { value: '3', text: '选项三' },
]

const showAllValues = () => {
  const { isChecked, inputValue, selectValue, textareaValue } = form.value
  ElMessageBox.alert(
    `<div style=\"font-size:16px;line-height:1.8;padding:15px 0;width: 400px;max-width:100%;margin:0 20px auto;\">
      复选框: <b style='color:#409EFF'>${isChecked ? '已选' : '未选'}</b><br>
      输入框: <span style='color:#67C23A'>${inputValue}</span><br>
      下拉选择: <span style='color:#E6A23C'>${selectValue}</span><br>
      多行文本: <span style='color:#909399'>${textareaValue}</span>
    </div>`,
    '🎉 表单内容',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '我知道了',
      customClass: 'my-messagebox',
      icon: 'el-icon-info',
      center: true,
      showClose: true,
      draggable: true
    }
  )
}

const openSetting = () => {
  ElMessageBox.alert(
    `<div style='font-size:16px;padding:12px 0;width: 360px;max-width:100%;margin:0 auto;'>插件设置功能开发中…</div>`,
    '⚙️ 插件设置',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '关闭',
      customClass: 'my-messagebox',
      icon: 'el-icon-info',
      center: true,
      showClose: true,
      draggable: true
    }
  )
}
</script>

<style lang="scss" scoped>
.plugin-app-main {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.18); // 半透明遮罩
  pointer-events: auto;

  .demo {
    position: relative;
    min-width: 380px;
    min-height: 240px;
    background: var(--b3-theme-surface, #fff);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 1.5px 6px rgba(0,0,0,0.08);
    border: 1px solid var(--b3-border-color, #e0e0e0);
    padding: 36px 40px 28px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transition: box-shadow 0.2s, background 0.2s;
    backdrop-filter: blur(2px);
    box-sizing: border-box;

    .close-btn {
      position: absolute;
      top: 14px;
      right: 16px;
      width: 32px;
      height: 32px;
      border: none;
      background: linear-gradient(135deg, #f8f8f8 60%, #ececec 100%);
      color: #888;
      border-radius: 50%;
      font-size: 22px;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.10);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s, transform 0.15s;
      z-index: 20;
      pointer-events: auto;
      &:hover {
        background: linear-gradient(135deg, #ffeaea 60%, #ffd6d6 100%);
        color: #e74c3c;
        transform: scale(1.08) rotate(8deg);
      }
    }
    .row, .col {
      width: 100%;
      gap: 12px;
    }
    .row {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    SyButton {
      margin-top: 8px;
      min-width: 120px;
      font-size: 15px;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      transition: box-shadow 0.2s;
      &:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
      }
    }
    SyInput, SySelect, SyTextarea {
      width: 220px;
      font-size: 15px;
      border-radius: 6px;
      border: 1px solid var(--b3-border-color, #e0e0e0);
      padding: 6px 10px;
      background: var(--b3-theme-background, #fafbfc);
      transition: border 0.2s;
      &:focus {
        border: 1.5px solid #a0bfff;
      }
    }
  }
}

// 暗色模式适配
:root[data-theme="dark"] .plugin-app-main .demo {
  background: #23272e;
  border: 1px solid #333b4a;
  color: #e6e6e6;
}
:root[data-theme="dark"] .plugin-app-main .demo .close-btn {
  background: linear-gradient(135deg, #2a2d32 60%, #23272e 100%);
  color: #aaa;
}
:root[data-theme="dark"] .plugin-app-main .demo .close-btn:hover {
  background: linear-gradient(135deg, #3a2323 60%, #4a2323 100%);
  color: #ff7675;
}

:deep(.my-messagebox .el-message-box__content) {
  text-align: center;
  font-size: 16px;
  padding: 8px 0;
}
:deep(.my-messagebox .el-message-box__btns .el-button) {
  border-radius: 8px;
  min-width: 100px;
}
</style> 